<template>
  <div class="dynamic-image-cases-pane">
    <el-tabs tab-position="left" style="height: 320px;">
      <el-tab-pane label="public目录<推荐>">
        <div class="dynamic-image-show-panel">
          <div><img :src="'/img/' + publicDirImgRef"/></div>
          <div>
            <p>图片名称</p>
            <el-select v-model="publicDirImgRef">
                <el-option label="VR观世界" value="vr-world.png"></el-option>
                <el-option label="美人出行" value="beauty-tour.svg"></el-option>
                <el-option label="黄金周旅行" value="golden-week-tour.svg"></el-option>
                <el-option label="爱阅读的女孩" value="reading-girl.svg"></el-option>
                <el-option label="中秋节旅行" value="mid-autumn-tour.png"></el-option>
            </el-select>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="assets目录·方式一">
        <div class="dynamic-image-show-panel">
          <div><img :src="assetsDirImageMethod1Ref"/></div>
          <div class="operate-panel">
            <p>图片名称</p>
            <el-select v-model="selectedAssetsDirImageNames1Ref" @change="changeDirImageMethod1">
              <el-option label="可爱狗狗" value="dog-peel-off.svg"></el-option>
              <el-option label="出水海豚" value="dolphin.svg"></el-option>
              <el-option label="小縁松" value="green-pine.svg"></el-option>
              <el-option label="红枫叶" value="maple-leaf.svg"></el-option>
              <el-option label="萌萌哒猫" value="mmd-cat.png"></el-option>
            </el-select>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="assets目录·方式二">
        <div class="dynamic-image-show-panel">
          <div>
            <img :src="assertDirImageMethod2Ref" />
          </div>
          <div class="operate-panel" style="margin-top: 24px;">
            <el-button type="primary" @click="nextAssetsDirImageForMethod2">下一张图片</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import {ref} from 'vue'

// 1. public目录的图片
const publicDirImgRef = ref('vr-world.png')

// 2. assets目录的图片, 方式一：利用 URL 函数提前解析所有图片路径
const assetsDirImagesForMethod1 = {
  'dog-peel-off.svg' : new URL('./assets/img1/dog-peel-off.svg', import.meta.url).href,
  'dolphin.svg' : new URL('./assets/img1/dolphin.svg', import.meta.url).href,
  'green-pine.svg' : new URL('./assets/img1/green-pine.svg', import.meta.url).href,
  'maple-leaf.svg' : new URL('./assets/img1/maple-leaf.svg', import.meta.url).href,
  'mmd-cat.png' : new URL('./assets/img1/mmd-cat.png', import.meta.url).href,
  'panda.svg' : new URL('./assets/img1/panda.svg', import.meta.url).href
}

const selectedAssetsDirImageNames1Ref = ref('dog-peel-off.svg')
const assetsDirImageMethod1Ref = ref(assetsDirImagesForMethod1['dog-peel-off.svg'])
function changeDirImageMethod1(imageName) {
  assetsDirImageMethod1Ref.value = assetsDirImagesForMethod1[imageName]
}

// 3. assets目录的图片, 方式一：利用 URL 函数提前解析所有图片路径
// 3.1 读取img2和img3下的所有图片文件
const assetsDirImageFilesForMethod2 = import.meta.glob(
  [
    './assets/img2/*.svg', 
    './assets/img2/**/*.svg', 
    './assets/img2/**/**.png',
    './assets/img3/**.svg'
  ],
  {eager: true}
)

// 3.2 提取img2和img3下所有图片的路径
const assetsDirImagesForMethod2 = []
Object.values(assetsDirImageFilesForMethod2).forEach(imgFile => {
  // default 属性就是编译后的图片路径
  assetsDirImagesForMethod2.push(imgFile.default)
});

// 3.3 与界面组件的联动
let assetsDirImageIndex = 0
const assertDirImageMethod2Ref = ref(assetsDirImagesForMethod2[0])

const nextAssetsDirImageForMethod2= () => {
  assetsDirImageIndex ++
  if(assetsDirImageIndex >= assetsDirImagesForMethod2.length){
    assetsDirImageIndex = 0
  }

  assertDirImageMethod2Ref.value = assetsDirImagesForMethod2[assetsDirImageIndex]
}

</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.dynamic-image-cases-pane {
  width: 640px;
  margin: 30px auto;
}

.dynamic-image-show-panel {
  display: flex;
}

.operate-panel {
  margin-left: 14px;
}

img {
  height: 300px;
  width: 300px;
  object-fit: scale-down;
}
</style>
